{% extends "article/base.html" %}

{% load staticfiles %}

{% block title %}articles tag{% endblock %}

{% block content %}
<div>
    <p>添加文章标签</p>
	<form class="form-horizontal" action="." method="post">{% csrf_token %}
        <div class="row" style="margin-top: 10px;">
            <div class="col-md-2 text-right"><span>文章标签</span></div>
            <div class="col-md-10 text-left">{{article_tag_form.tag}}</div>
        </div>
        <div class="row">
            <input type="button" class="btn btn-primary btn-lg" style="margin-left:200px; margin-top:10px;" value="添加" onclick="add_tag()">
        </div>
    </form>
</div>
<div>
    <p>已有标签列表</p>
    <table class="table table-hover">
    	<tr>
    	    <td>序号</td>
    	    <td>文章标签</td>
    	    <td>操作</td>
    	</tr>
    	{% for article_tag in article_tags %}
    	<tr id={{ forloop.counter }}>
    	    <td>{{ forloop.counter }}</td>
    	    <td>{{ article_tag.tag }}</a></td>
    	    <td>
    	        <a nane="delete" href="javascript:" onclick="del_tag(this, {{ article_tag.id }})"><span class="glyphicon glyphicon-trash"></span></a>
    	    </td>
    	</tr>
{% empty %}
    	<p>You have no article tags. Please add them.</p>
    	{% endfor %}
    </table>
</div>
<script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
<script type="text/javascript" src="{% static 'js/layer.js'%}"></script>
<script type="text/javascript">
	function add_tag(){
		tag = $("#id_tag").val();
		$.ajax({
			url: '{% url "article:article_tag" %}',
			type: "POST",
            data: {"tag":tag},
            success: function(e){
            	if(e=="1"){
            		layer.msg("You have added a new tag.");
            		window.location.reload();
            	} else {
            		layer.msg(e)
            	}
            }
		});
	}

function del_tag(the, tag_id){
	var article_tag = $(the).parents("tr").children("td").eq(1).text();
	layer.open({
		type: 1,
		skin: "layui-layer-rim",
		area: ["400px", "200px"],
		title: "删除文章标签",
		content: '<div class="text-center" style="margin-top:20px"><p>是否确定删除文章标签《'+article_tag+'》</p></div>',
		btn:['确定', '取消'],
		yes: function(){
			$.ajax({
				url: '{% url "article:del_article_tag" %}',
				type:"POST",
				data: {"tag_id":tag_id},
				success: function(e){
					if(e=="1"){
						parent.location.reload();
						layer.msg("The tag has been deleted.");
					}else{
						layer.msg("删除失败");
					}
					
				},
			})	
		},
	});
}

</script>
{% endblock %}
